<template>
  <div class="detail_container">
    <div class="head_title" v-if="!detailForm.id">创建一企一档</div>
    <div class="head_title" v-else-if="detailForm.id && isEdit">编辑一企一档</div>
    <div class="head_title" v-else-if="detailForm.id && !isEdit">查看一企一档</div>
    <el-divider></el-divider>
    <div class="px-20">
      <el-form :model="params" :disabled="detailForm.id && !isEdit" ref="expertForm" label-width="75px" :rules="rules" label-position="left" size="small">


        <el-row :gutter="15">
          <el-col :lg="8" :xl="6">
            <el-form-item label="企业名称" prop="enterpriseName">
              <el-input v-model="params.enterpriseName" placeholder="请输入企业名称" />
            </el-form-item>
          </el-col>



          <el-col :lg="8" :xl="6">
            <el-form-item label="信用代码" prop="creditCode">
              <el-input v-model="params.creditCode" placeholder="请输入信用代码" />
            </el-form-item>
          </el-col>

          <el-col :lg="8" :xl="6">
            <el-form-item label="类型" prop="type">
              <el-select v-model="params.typeList" multiple placeholder="请选择类型" style="width: 100%;" >
                <el-option
                  v-for="dict in dict.type.enterprise_info_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :lg="8" :xl="6">
            <el-form-item label="类别" prop="category">
              <el-select v-model="params.category" placeholder="请选择类别" style="width: 100%;" >
                <el-option
                  v-for="dict in dict.type.enterprise_category"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="15">
          <el-col :lg="8" :xl="6">
            <el-form-item label="镇/街道" prop="town" label-width="80px">
              <el-tree
                :data="treeCityCode"
                node-key="id"
                :props="defaultProps"
                @node-click="handleNodeClick"
                ref="tree">
              </el-tree>
              <!--<el-select v-model="params.town">
                <el-option :value="optionValue">
                  &lt;!&ndash;:data 初始化获取的数据&ndash;&gt;
                  &lt;!&ndash;lazy 表示节点是否懒加载，即是否是节点展开时才去异步加载数据&ndash;&gt;
                  &lt;!&ndash;@node-click 当节点被点击时触发handleNodeClick方法&ndash;&gt;
                  &lt;!&ndash;:load 当节点需要加载子节点时触发loadNode方法&ndash;&gt;
                  <el-tree
                    :data="treeCityCode"
                    node-key="id"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                    ref="tree">
                  </el-tree>
                </el-option>
              </el-select>-->
            </el-form-item>


          </el-col>

          <el-col :lg="8" :xl="6">
            <el-form-item label="详细地址" prop="addr">
              <el-input v-model="params.addr" placeholder="请输入详细地址" />
            </el-form-item>
          </el-col>
        </el-row>



        <el-row :gutter="15">


          <el-col :lg="8" :xl="6">
            <el-form-item label="法人代表" prop="legalPerson">
              <el-input v-model="params.legalPerson" placeholder="请输入法人代表" />
              <!--<el-select v-model="params.legalPerson" placeholder="请选择法人代表">
                <el-option
                  v-for="item in userList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId">
                </el-option>
              </el-select>-->
            </el-form-item>
          </el-col>

          <el-col :lg="8" :xl="6">
            <el-form-item label="联系电话" prop="contactNumber">
              <el-input v-model="params.contactNumber" placeholder="请输入联系电话" />
            </el-form-item>
          </el-col>

          <el-col :lg="8" :xl="6">
            <el-form-item label="营业执照" prop="businessLicense">
              <el-input v-model="params.businessLicense" placeholder="请输入营业执照" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="15">
          <el-col :lg="8" :xl="6">
            <el-form-item label="卫生许可证" prop="sanitaryPermit" label-width="120px">
              <el-input v-model="params.sanitaryPermit" placeholder="请输入卫生许可证" />
            </el-form-item>
          </el-col>



          <el-col :lg="8" :xl="6">
            <el-form-item label="卫生许可证到期时间" prop="sanitaryPermitDate" label-width="150px">
              <el-date-picker
                v-model="params.sanitaryPermitDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>



        <el-row :gutter="15">
          <el-col :lg="8" :xl="6">
            <el-form-item label="健康证状态" prop="healthCertificateStatus" label-width="100px" >
              <el-radio-group v-model="params.healthCertificateStatus">
                <el-radio
                  v-for="dict in dict.type.health_certificate_status"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :lg="8" :xl="6">
            <el-form-item label="工商档案状态" prop="archivesStatus" label-width="100px">
              <el-radio-group v-model="params.archivesStatus">
                <el-radio
                  v-for="dict in dict.type.business_file_status"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
    <div class="flex p-20">
      <el-button @click="sureForm('expertForm')" type="primary" v-if="!detailForm.id || isEdit">确认提交</el-button>
      <el-button @click="isEdit = true" type="primary" v-if="detailForm.id && !isEdit">编辑</el-button>
      <el-button @click="show = false">返回</el-button>
    </div>
  </div>
</template>

<script>

  import { getTreeCityCode } from "@/api/zhangping/zpEnterpriseInfo";
  export default{
    dicts: ['enterprise_info_type', 'health_certificate_status', 'business_file_status', 'enterprise_category'],
    data () {
      return {
        params:{
            id: null,
            enterpriseName: null,
            creditCode: null,
            type: null,
            typeList: [],
            category: null,
            town: null,
            townCode: null,
            addr: null,
            legalPerson: '',
            contactNumber: null,
            businessLicense: null,
            sanitaryPermit: null,
            sanitaryPermitDate: null,
            healthCertificateStatus: null,
            archivesStatus: null,
            lastUpdateTime: null,
            userId: null,
            createId: null,
            createBy: null,
            createTime: null,
            updateId: null,
            updateBy: null,
            updateTime: null,
            delFlag: null
        },
        treeCityCode: [],
        defaultProps: {
          children: 'children',
          label: 'mname'
        },
        mname: '漳平',
        optionValue: '',
        rules: {},
      }
    },
    props: {
      editVisible: {
        type: Boolean,
        default: () => {
          return false
        }
      },
      detailForm: {
        type: Object,
        default: () => {
          return {}
        }
      },
      isEdit:{
        type:Boolean,
        default:()=>{
          return false
        }
      },
    },
    watch:{

    },
    computed: {
      show: {
        get () {
          return this.editVisible
        },
        set (val) {
          this.$emit('update:editVisible', val)
        }
      },
    },
    created () {
      if(this.detailForm.id){
        this.params = {...this.detailForm}
      }
      this.getTreeCityCode()
      this.getUserList()
    },
    methods: {
      // 确认
      sureForm(formName) {
        console.log('formName', formName)
        this.$refs [formName].validate((valid) => {
          console.log('detailForm', this.detailForm)
          if (valid) {
            if(this.detailForm.id){
              this.$emit('submitForm', this.params,this.detailForm.id)
            }else{
              this.$emit('submitForm', this.params)
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },

      /** 查询一企一档列表 */
      async getTreeCityCode() {
        getTreeCityCode({mname: this.mname}).then(response => {
          this.treeCityCode = response.data;
        });
      },

      handleNodeClick(data) {
        console.log("111111111",data);
        this.params.town = data.id
        this.optionValue = data.mname
        this.params.townCode = data.numbers
      }
    }

  }
</script>

<style scoped="scoped" lang="scss">
  .titile_txt{
    font-family: Source Han Sans SC, Source Han Sans SC;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    line-height: 19px;
    margin-bottom: 15px;
  }
</style>
